<template>
  <div class="setting-wrapper">
    <div class="setting-headbar">
      <div><b>气象分区</b></div>
      <transition name="el-fade-in">
        <div v-if="isModified">
          <el-button type="warning" link @click="handleSave">
            <el-icon><WarningFilled /></el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="info" link @click="initializeCopies">
            <el-icon><Remove /></el-icon>
            <span>取消</span>
          </el-button>
        </div>
      </transition>
    </div>
    <el-table :data="areaLayoutCopied" style="width: 100%" height="240">
      <!-- <el-table-column type="index"></el-table-column> -->
      <!-- <el-table-column
        prop="areaCode"
        label="#"
        min-width="40"
      ></el-table-column> -->
      <el-table-column prop="areaName" label="名称" min-width="40">
      </el-table-column>
      <el-table-column label="类" min-width="120">
        <template #default="scope">
          <el-tag style="padding: 2px 6px 0 6px; margin-right: 6px">{{
            scope.row.areaType
          }}</el-tag>
          <span>{{ scope.row.areaTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="originalCapacity"
        label="最大通行量"
        min-width="100"
      >
        <template #default="scope">
          <el-input-number
            v-model="scope.row.originalCapacity"
            style="width: 100%"
            @change="(currentValue) => changeValue(scope.$index, currentValue)"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="models" label="模块" min-width="120">
      </el-table-column>
      <el-table-column
        prop="raletedGatePoints"
        label="相关进点"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="raletedAirports"
        label="相关机场"
        min-width="120"
      ></el-table-column> -->
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
import axios from "axios";
import useCapacityStore from "@/store/capacity.js";
const capacityStore = useCapacityStore();
const areaLayout = computed(() => capacityStore.areaLayout);
const areaLayoutCopied = ref([]);

const changeValue = (index, value) => {
  areaLayoutCopied.value[index].currentCapacity = value;
};

const isModified = computed(() => {
  return (
    JSON.stringify(areaLayout.value) != JSON.stringify(areaLayoutCopied.value)
  );
});

const initializeCopies = () => {
  areaLayoutCopied.value = JSON.parse(JSON.stringify(areaLayout.value));
};

const handleSave = () => {
  axios
    .post("api/capacity_params.php", {
      key: "areaLayout",
      value: areaLayoutCopied.value,
    })
    .then((response) => {
      console.log(response);
      capacityStore.areaLayout = JSON.parse(
        JSON.stringify(areaLayoutCopied.value)
      );
      console.log(areaLayout);
    })
    .catch((error) => console.error(error));
};

onMounted(() => {
  initializeCopies();
});
</script>

<style scoped>
@import "./style.css";
</style>
